<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/all-fower.css">
    <link rel="stylesheet" href="../assist/swiper-7.4.1/swiper/swiper-bundle.min.css">
    <script src="../assist/swiper-7.4.1/swiper/swiper-bundle.min.js"></script>
    <script src="../js/axios.min.js"></script>
    <script src="../js/all-flower.js"></script>
</head>

<body>
    <iframe src="./header.html" frameborder="0" scrolling="no" width="100%" height="160px"></iframe>
    <!-- 导航 -->
    <section>
        <ul class="sec-nav">
            <li><a href="..//index.html">首页</a></li>
            <li><a href="#">鲜花</a></li>
            <li><a href="#">水果花束</a></li>
            <li><a href="#">设计师臻选</a></li>
            <li><a href="#">星座专场</a></li>
            <li><a href="#">永生瓶花</a></li>
            <li>
                <a href="#">鲜花批发</a>
                <div class="nav-wholesale">
                    <ul>
                        <li><a href="">玫瑰花</a></li>
                        <li><a href="">洋桔梗</a></li>
                        <li><a href="">绣球花</a></li>
                        <li><a href="">康乃馨</a></li>
                        <li><a href="">百合花</a></li>
                        <li><a href="">向日葵</a></li>
                        <li><a href="">郁金香</a></li>
                        <li><a href="">满天星</a></li>
                        <li><a href="">乒乓菊</a></li>
                        <li><a href="">紫罗兰</a></li>
                        <li><a href="">雏菊</a></li>
                        <li><a href="">黄莺</a></li>
                        <li><a href="">相思梅</a></li>
                        <li><a href="">勿忘我</a></li>
                        <li><a href="">马蹄莲</a></li>
                        <li><a href="">扶郎花</a></li>
                        <li><a href="">菊花</a></li>
                        <li><a href="">马蹄莲</a></li>
                        <li><a href=""></a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">绿植专区</a></li>
            <li><a href="#">花语大全</a></li>
        </ul>
    </section>
    <!-- 轮播图 -->
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../images/all-flo-swiper.png" alt=""></div>
            <div class="swiper-slide"><img src="../images/all-flo-swiper01.png" alt=""></div>
            <div class="swiper-slide"><img src="../images/all-flo-swiper02.png" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
    <!-- 商品列表 -->
    <div class="all-flo">
        <div class="all">全部鲜花</div>
        <ul>
            <!-- <li>
                    <a href="#" target="_blank">
                        <img src="./images/recommend1.png" alt="">
                        <p>星语心愿</p>
                        <span>￥199</span>
                    </a>
                </li> -->
        </ul>
    </div>
    <!-- 尾部 -->
    <iframe src="../html/footer.html" frameborder="0" scrolling="no" width="100%" height="630px"></iframe>
    <!-- 轮播图样式 -->
    <script>
        var mySwiper = new Swiper('.swiper', {
            loop: true, // 循环模式选项
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // autoplay: true,//等同于以下设置
            autoplay: {
                delay: 2000,
                pauseOnMouseEnter: true,
                disableOnInteraction: false,
            },
            effect: 'fade',
        })       
    </script>
</body>

</html>